<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f0f0f0;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-button {
            background: #28a745;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 10px;
            font-size: 16px;
        }
        .test-button:hover {
            background: #218838;
        }
        .test-text {
            color: red;
            font-size: 18px;
            margin: 20px 0;
            padding: 10px;
            background: #ffe6e6;
            border-radius: 5px;
        }
        .output-area {
            border: 1px solid #ddd;
            padding: 10px;
            margin: 10px 0;
            min-height: 100px;
            background: #f9f9f9;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🧪 简单测试页面</h1>
        
        <div class="test-text">这是红色测试文本，如果你能看到这个，说明页面正常加载</div>
        
        <button class="test-button" onclick="testFunction()">点击测试按钮</button>
        <button class="test-button" onclick="testStream()">测试流式功能</button>
        
        <div class="output-area" id="outputArea">
            输出区域 - 点击按钮后会在这里显示结果
        </div>
        
        <div>
            <a href="/ai-chat" class="test-button" style="text-decoration: none; display: inline-block;" target="_blank">返回聊天页面</a>
        </div>
    </div>

    <script>
        function testFunction() {
            const outputArea = document.getElementById('outputArea');
            outputArea.innerHTML += '<p>✅ 按钮点击成功！时间: ' + new Date().toLocaleTimeString() + '</p>';
        }
        
        async function testStream() {
            const outputArea = document.getElementById('outputArea');
            outputArea.innerHTML = '<p>🔄 开始测试流式功能...</p>';
            
            try {
                const response = await fetch('/api/ai/chat/stream', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        prompt: '你好，请简单介绍一下你自己',
                        history: [],
                        temperature: 0.7,
                        maxTokens: 100,
                        streamMode: true
                    })
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const reader = response.body.getReader();
                const decoder = new TextDecoder();
                let buffer = '';
                let fullResponse = '';

                while (true) {
                    const { done, value } = await reader.read();
                    if (done) break;

                    const chunk = decoder.decode(value, { stream: true });
                    buffer += chunk;

                    const events = buffer.split('\n\n');
                    buffer = events.pop() || '';

                    for (const event of events) {
                        if (!event.trim()) continue;

                        const lines = event.split('\n');
                        let eventType = '';
                        let eventData = '';

                        for (const line of lines) {
                            if (line.startsWith('event: ')) {
                                eventType = line.slice(7).trim();
                            } else if (line.startsWith('data: ')) {
                                eventData = line.slice(6).trim();
                            }
                        }

                        if (eventType === 'text' && eventData) {
                            try {
                                const parsedData = JSON.parse(eventData);
                                if (parsedData.text) {
                                    fullResponse += parsedData.text;
                                    outputArea.innerHTML = '<p>📝 流式响应: ' + fullResponse + '</p>';
                                }
                            } catch (e) {
                                console.error('解析数据失败:', e);
                            }
                        } else if (eventType === 'done') {
                            outputArea.innerHTML += '<p>✅ 流式测试完成！</p>';
                        }
                    }
                }
            } catch (error) {
                outputArea.innerHTML += '<p>❌ 测试失败: ' + error.message + '</p>';
                console.error('测试失败:', error);
            }
        }
    </script>
</body>
</html> 